<!DOCTYPE html>
<html lang="zh-CH">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>ZJGS2022届八班</title>
    <style>
      body {
        margin: 0;
        height: 120vh;
        background-color: #eee;
      }
      h5{
        font-size: 12px;
        margin: 10px;
        margin-left: 10%;margin-right: 10%;
      }
      .flex {
        display: flex;
      }
      .shadow {
        box-shadow: rgb(0 0 0/ 20%) 0px 2px 1px -1px,
          rgb(0 0 0 / 14%) 0px 1px 1px 0px, rgb(0 0 0 / 12%) 0px 1px 3px 0px;
      }
      .baiSe {
        background-color: white;
      }
      .flex1 {
        flex: 1;
      }
      .column {
        flex-direction: column;
      }
      .mg8 {
        margin: 8px;
      }
      .mgr8 {
        margin-right: 8px;
      }
      .mgt8 {
        margin-top: 8px;
      }
      .daoHang {
        padding: 15px 20px;
        border-bottom: 2px solid rgb(190, 190, 190);
        font-size: 15px;
        color: #666;
      }
      /*当屏幕宽度小于600的时候要改变的css*/
      @media (max-width: 2000px) {
        .ceBian {
          display: none;
        }
        .neiRongLan {
          flex-direction: column;
        }
        .shuJuQu {
          flex-direction: column;
        }
        .youQu {
          margin-left: 8px;
        }
        .shuJu {
          margin: 0 0 0;
          flex: auto;
        }
        /*移除滚动条*/
        .neiRongLan::-webkit-scrollbar {
          display: none;
        }
      }

      @media (max-width: 700px){
        .biaoti{
          display: none;
        }
      }
    </style>
  </head>
  <body class="flex">
    <!--侧边栏-->
    <div style="width: 25%;min-width: 85px;max-width: 200px; z-index: 2" class="baiSe shadow">
      <!--头像栏-->
      <div
        style="
          padding: 8px;
          padding-left: 20px;
          align-items: center;
          border-bottom: 3px solid #999;
          max-height: 100px;
        "
        class="flex"
      >
        <img
          alt=""
          src="../images/bg.webp"
          width="50px"
          height="50px"
        />
        <p style="margin-left: 10px" class="biaoti">八班的网站</p>
      </div>
      <!--导航栏-->
      <div class="flex1 flex column">
        <!--导航条-->
        <div class="daoHang">
          <a href="../index.html"><b>首页></b></a>
        </div>
        <div class="daoHang">
          <a href="./YuChu.html"><b>预初></b></a>
        </div>
        <div class="daoHang">
          <a href="./ChuYi.html"><b>初一></b></a>
        </div>
        <div class="daoHang">
          <a href="./ChuEr.html"><b>初二></b></a>
        </div>
        <div class="daoHang">
          <a href="./ChuSan.html"><b>初三></b></a>
        </div>
        <div class="daoHang">
          <a href="./BanShi.html"><b>班史></b></a>
        </div>
        <div class="daoHang">
          <a href="./LaoShi.html"><b>老师></b></a>
        </div>
        <div class="daoHang">
          <a href="./TongXue.html"><b>同学></b></a>
        </div>
        <div class="daoHang">
          <a href="./end.html"><b>最后></b></a>
        </div>
        <div class="daoHang">
          <a href="./BanQuan.html"><b>关于></b></a>
        </div>
      </div>
    </div>
    <!--主区域-->
    <div class="flex1 flex column">
      <!--头部栏-->
      <div
        style="
          padding: 8px;
          height: 60px;
          z-index: 1;
          justify-content: center;
          align-items: center; ;
        "
        class="baiSe shadow mg8 flex"
      >
        <h1>版权与关于</h1>
        </div>

        <!--右区-->
        <div style="flex: 1" class="youQu column flex mgr8 mgt8 shadow">
          <!--消息区-->
          <div
            style="height: 600px; align-items: center;padding: 6px;"
            class="baiSe mgt8 shadow flex column"
          >
            <h3>Copyright [2022] by 全体八班成员</h3>
            <h5>网站全部开源  <a href="https://github.com/Zhe-SH-CN/class8-test02">这是传送门(测试版）</a></h5>
            <h5>技术支持：张思哲</h5>
            <h5>班史提供：刘思齐</h5>
            <h5>照片提供：严沛灵、袁严右、沈亿昕、王子涵</h5>
            <h5>文字内容提供：（排名不分先后）沈知瑜、张思哲、徐明烨、李宸苒、赵欣怡、李奕晨、陈佳薇、王子涵、
杨好、沈亿昕、刘思齐、黄子宸、翁天扬、赵遥达</h5>
<h5 style="margin-bottom: 0;">如有疑问，发邮件至</h5>
<h5 style="margin-top: 0;"><b><b>1968988211@qq.com</b></b></h5>
          </div>
        </div>
      </div>
    </div>
  </body>
</html>
